<template>
    <t-layout class="layout">
        <t-header class="header">
            <t-head-menu value="header-item-1" height="64px">
                <template #logo>
                    <!-- <img width="136" class="logo" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" /> -->
                    <span class="logo">通用管理后台</span>
                </template>
                <t-menu-item value="header-item-1"> 已选内容 </t-menu-item>
                <t-menu-item value="header-item-2"> 菜单内容一 </t-menu-item>
                <t-menu-item value="header-item-3"> 菜单内容二 </t-menu-item>
                <t-menu-item value="header-item-4" :disabled="true"> 菜单内容三 </t-menu-item>
                <template #operations>
                    <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="search" /></a>
                    <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="notification" /></a>
                    <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="mail" /></a>
                    <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="user-filled" /></a>
                </template>
            </t-head-menu>
        </t-header>
        <t-layout>
            <t-aside class="aside" style="border-top: 1px solid var(--component-border);">
                <t-menu theme="dark" :value="activeMenu" :collapsed="collapsed">
                    <template #operations>
                        <t-button shape="square" @click="changeCollapsed">
                            <t-icon :name="iconName" />
                        </t-button>
                    </template>
                    <t-menu-item value="dashboard" @click="() => selectMenuItem('dashboard')">
                        <template #icon>
                            <t-icon name="dashboard" />
                        </template>
                        仪表盘
                    </t-menu-item>
                    <t-menu-item value="user" @click="() => selectMenuItem('user')">
                        <template #icon>
                            <t-icon name="user" />
                        </template>
                        用户管理
                    </t-menu-item>
                    <t-menu-item value="orders" @click="() => selectMenuItem('orders')">
                        <template #icon>
                            <t-icon name="root-list" />
                        </template>
                        订单管理
                    </t-menu-item>
                    <t-menu-item value="financial" @click="() => selectMenuItem('financial')">
                        <template #icon>
                            <t-icon name="control-platform" />
                        </template>
                        财务管理
                    </t-menu-item>
                    <t-submenu value="permission">
                        <template #icon>
                            <t-icon name="control-platform" />
                        </template>
                        <template #title>
                            <span>权限管理</span>
                        </template>
                        <t-menu-item value="permission-account" @click="() => selectMenuItem('permission-account')">
                            账号管理
                        </t-menu-item>
                        <t-menu-item value="permission-group" @click="() => selectMenuItem('permission-group')"> 用户组和权限
                        </t-menu-item>
                    </t-submenu>
                </t-menu>
            </t-aside>
            <t-layout class="main-content-layout">
                <t-content class="main-content">
                    <RouterView />
                </t-content>
                <t-footer class="footer">广州市回声笔网络科技有限公司提供技术支持</t-footer>
            </t-layout>
        </t-layout>
    </t-layout>
</template>

<script setup>
    import { ref, computed, onBeforeMount, reactive } from 'vue';
    import { useRouter } from 'vue-router';
    import {
        Menu as TMenu,
        Submenu as TSubmenu,
        MenuItem as TMenuItem,
        Button as TButton,
        Icon as TIcon,
        Aside as TAside,
        Layout as TLayout,
        Header as THeader,
        Content as TContent,
        Footer as TFooter,
        HeadMenu as THeadMenu,
    } from 'tdesign-vue-next';

    const collapsed = ref(false);
    const iconName = computed(() => (collapsed.value ? 'chevron-right' : 'chevron-left'));
    const activeMenu = ref('dashboard');
    const router = useRouter();
    const pageConfig = reactive({
        name: null
    })

    const changeCollapsed = () => {
        collapsed.value = !collapsed.value;
    };

    // 计算属性用于样式绑定
    const asideWidth = computed(() => (collapsed.value ? '64px' : '232px'));
    const contentMarginLeft = computed(() => (collapsed.value ? '64px' : '232px'));

    // 点击左侧菜单项时触发
    function selectMenuItem(item) {
        activeMenu.value = item;
        console.log('Selected menu item:', item);
        router.push({ name: item });

    }

    // 生命周期钩子
    onBeforeMount(() => {
        console.log(router.currentRoute)
        pageConfig.name = router.currentRoute.value.name;
    })
</script>
<style lang="less" scoped>

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    .aside {
        position: fixed;
        top: 64px;
        left: 0;
        bottom: 0;
        width: v-bind('asideWidth');
        height: calc(100vh - 64px);
        z-index: 100;
        transition: width 0.3s ease;
    }

    .main-content-layout {
        margin-left: v-bind('contentMarginLeft');
        margin-top: 64px;
        display: flex;
        flex-direction: column;
        transition: margin-left 0.3s ease;
    }

    .main-content {
        padding: 20px;
        min-height: calc(100vh - 156px);
    }

    .footer {
        height: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid var(--component-border);
        background-color: white;
    }

    .t-menu__operations {
        height: 20px !important;
        background-color: #242424 !important;
    }

    .t-demo-collapse-btn {
        color: #fff;
        position: absolute;
        top: 16px;
        right: 8px;
        z-index: 200;

        &:hover {
            background-color: #4b4b4b;
            border-color: transparent;
            --ripple-color: #383838;
        }
    }

    // 菜单收起时的图标样式优化
    :deep(.t-menu--collapsed) {
        .t-icon {
            margin-right: 0;
        }
    }

    // 添加过渡效果
    :deep(.t-menu__item),
    :deep(.t-menu__item-icon) {
        transition: all 0.2s ease;
    }
</style>